<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>预告页面</title>
  </head>
  <!-- 页面的样式 -->
  <link rel="stylesheet" href="css/herald.css" media="screen" title="no title" charset="utf-8">
  <!-- 侧边栏的样式以及js文件 -->
  <link rel="stylesheet" type="text/css" href="cebianlan/css/default.css" />
  <script type="text/javascript" src="js/jquery-3.1.0.js"></script>
  <script type="text/javascript" src="cebianlan/js/jquery.wheelmenu.js"></script>

  <link rel="stylesheet" type="text/css" href="cebianlan/css/style.css" />
  <link href='cebianlan/css/elusive-webfont.css' rel='stylesheet' type='text/css'>
  <body>
    <div class="content">
      <!-- 放一个视频连接显示最新的预告宣传片 -->
      <div class="video_infomation">
        <h2 class="title" id="title">标题</h2>
        <h3 class="title_one" id="title_one">11</h3>
        <h5 class="title_two" id="title_two">22</h5>

        <div class="video_background">
          <video class="video-player" id="video" src="http://vfx.mtime.cn/Video/2016/10/09/mp4/161009010924761204.mp4" controls="" poster="">
            <source src="http://vfx.mtime.cn/Video/2016/10/09/mp4/161009010924761204.mp4" type='video/ogg; codecs="theora, vorbis"'>
            <source src="http://vfx.mtime.cn/Video/2016/10/09/mp4/161009010924761204.mp4" type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"'>
            <p>抱歉,但您的浏览器不支持视频格式.</p>
          </video>
        </div>
      </div>
      <!-- 可以放图集 -->
      <div class="video_content">
        <h3 class="title">放宣传片的动画</h3>
        <div class="img" >
          <img id="img" src="" alt="" />
        </div>
        <div class="different_function">
          <div class="vote">
            <!-- 影片简介 -->
            <ul class="information">
              <h5 class="top"><a href="#"></a>电影简介</h5>
              <li id="li0">导演:</li>
              <li id="li1">类型:</li>
              <li id="li2">主演:</li>
              <li id="li3">时间:</li>
              <li id="li4">简介:</li>
            </ul>
            <!-- 功能区 -->
            <ul class="function">
              <h5 class="top"><a href="#"></a>我要评价</h5>
              <li>音乐 <span class="line"></span></li>
              <li>情节 <span class="line"></span></li>
              <li>画面 <span class="line"></span></li>
              <li>导演 <span class="line"></span></li>
              <li>演技 <span class="line"></span></li>
              <li>我要评分 <span class="mark_line"> <span class="text">分数</span><span class="line_color"></span><span class="button"></span></span> </li>
              <textarea name="name" placeholder="写影评..(不超过60个字)"></textarea>
              <li> <button type="button" name="button">分享</button>  <button type="button" name="button">提交</button></li>
            </ul>
            <!-- 评分区域 -->
            <ul class="mark">
              <h5 class="top"><a href="#"></a>坚果评分</h5>
              <li class="score">分数 <span>8.5</span></li>
              <li>五星
                <span><img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span>xx%
              </li>
              <li>四星
                <span><img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span>xx%
              </li>
              <li>三星
                <span><img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span>xx%
              </li>
              <li>二星
                <span><img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span>xx%
              </li>
              <li>一星
                <span><img src="img/star_yellow.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span><span>
                <img src="img/star_gray.png" alt="" /></span>xx%
              </li>
              <li>xxx人评分</li>
              <li>xxx人想看</li>
            </ul>
          </div>
        </div>
        <div class="filmcontent" id="content">
          内容

        </div>
      </div>
      <!-- 网友的评论区域,主要显示,分两栏,主要左侧显示网友的评论,右边显示精华评论,以及最热评论的主题-->
      <div class="comment">
        <div class="user_comment">
          <div class="self_comment">
            <img src="1.jpg" alt="" />
            <form class="" action="" method="post">
              <textarea name="name" placeholder="发表短评...(最多输入60个字)" maxlength="60"></textarea>
              <button type="submit" name="button">发表评论</button>
            </form>
          </div>
          <div class="other_comment">
            <div class="cell">
              <img src="1.jpg" alt=""/>
              <h5>昵称</h5>
              <span></span>
              <p class="text">

              </p>
              <form class="" action="" method="post">
                <textarea name="name" placeholder="回复内容..(不超过60个字)"></textarea>
                <a href="#" class="share"></a>
                <a href="#" class="collect"></a>
                <a href="#" class="info"></a>
                <button type="submit" name="button">发表评论</button>

              </form>
            </div>
            <div class="cell">
              <img src="1.jpg" alt=""/>
              <h5>昵称</h5>
              <span></span>
              <p class="text">

              </p>
              <form class="" action="" method="post">
                <textarea name="name" placeholder="回复内容..(不超过60个字)"></textarea>
                <a href="#" class="share"></a>
                <a href="#" class="collect"></a>
                <a href="#" class="info"></a>
                <button type="submit" name="button">发表评论</button>

              </form>
            </div>
            <div class="cell">
              <img src="1.jpg" alt=""/>
              <h5>昵称</h5>
              <span></span>
              <p class="text">

              </p>
              <form class="" action="" method="post">
                <textarea name="name" placeholder="回复内容..(不超过60个字)"></textarea>
                <a href="#" class="share"></a>
                <a href="#" class="collect"></a>
                <a href="#" class="info"></a>
                <button type="submit" name="button">发表评论</button>

              </form>
            </div>
            <div class="cell">
              <img src="1.jpg" alt=""/>
              <h5>昵称</h5>
              <span></span>
              <p class="text">

              </p>
              <form class="" action="" method="post">
                <textarea name="name" placeholder="回复内容..(不超过60个字)"></textarea>
                <a href="#" class="share"></a>
                <a href="#" class="collect"></a>
                <a href="#" class="info"></a>
                <button type="submit" name="button">发表评论</button>

              </form>
            </div>

          </div>
        </div>
        <div class="hot">
          <div class="hot_comment">
            <h3>热门评论</h3>
            <div class="cell">
              <a href="#">标题</a>
              <p>
                内容
              </p>
            </div>
            <div class="cell">
              <a href="#">标题</a>
              <p>
                内容
              </p>
            </div>
            <div class="cell">
              <a href="#">标题</a>
              <p>
                内容
              </p>
            </div>
            <img src="img/more.png" alt="" class="hot_more"/>
          </div>
          <div class="hot_theme">
            <h3>热门主题</h3>
            <div class="cell">
              <a href="#">标题</a>
              <p>
                内容
              </p>
            </div>
            <div class="cell">
              <a href="#">标题</a>
              <p>
                内容
              </p>
            </div>
            <div class="cell">
              <a href="#">标题</a>
              <p>
                内容
              </p>
            </div>
            <img src="img/more.png" alt="" class="hot_more"/>
          </div>
        </div>
      </div>
      <div class="main">
    		<a href="#wheel8" class="wheel-button w"><i class="customicon-plus"></i></a>
    		<ul id="wheel8" data-angle="W" class="wheel">
    			<li class="item"><a href="#home" id="top"><img src="cebianlan/img/top.png" alt="" /></a></li>
    			<li class="item"><a href="#home"><img src="cebianlan/img/help.png" alt="" /></a></li>
          <li class="item"><a href="#home"><img src="cebianlan/img/about.png" alt="" /></a></li>
          <li class="item"><a href="#home" id="comment"><img src="cebianlan/img/comment.png" alt="" /></a></li>
          <li class="item"><a href="#home" class="top"><img src="cebianlan/img/share.png" alt="" /></a></li>
    		</ul>
    	</div>
    </div>

  </body>
  <script type="text/javascript">
  $(".wheel-button").wheelmenu({
  	trigger: "hover",
  	animation: "fly",
  	angle: "NW"
  });
  var btn = document.querySelector('.function .button');
  var line_color = document.querySelector('.function .line_color');
  var line = document.querySelector('.function .mark_line');
  var text = document.querySelector('.function .text');

  btn.onmousedown = function(event){
    event = event || window.event;
    var dx = event.clientX - btn.offsetLeft;
    var score;
    document.onmousemove = function(event){
      event = event || window.event;
      var maxWidth = line.offsetWidth - btn.offsetWidth;
      var left = event.clientX - dx;
      if (left <= 0) {
        left = 0;
      }else if(left >= maxWidth){
        left = maxWidth;
      }
      // 计算百分数
      score = Math.floor(left / maxWidth * 100) /10;
      text.style.display = 'inline-block';
      if(score >=0 && score <= 2){
        text.innerText = score + '分:'+'很差,完全是浪费时间';
      }else if(score >2 && score <= 4){
        text.innerText = score + '分:'+'平庸之作,不看也罢';
      }else if(score >4 && score <= 6){
        text.innerText = score + '分:'+'一般,不妨看看';
      }else if(score >6 && score <= 8){
        text.innerText = score + '分:'+'很好,公认的佳作';
      }else{
        text.innerText = score + '分:'+'很完美,绝对不容错过';
      }
      btn.style.left = left + 'px';
      line_color.style.width = left + 5+ 'px';
    }
    document.onmouseup = function(event){
      event = event || window.event;
      document.onmousemove = null;
      return score;
    }
  }
  /****************************返回顶部的js动画**********************************/
  $('#top').click(function(){
    $('html,body').animate({
      scrollTop:'0px'
    },1000);
  });
  $('#comment').click(function(){
    $('html,body').animate({
      scrollTop:'2095px'
    },1000);
  })
  </script>

  <script type="text/javascript">



  window.onload =function(){
		var json="0";
    if (window.XMLHttpRequest) {
        var request = new XMLHttpRequest();
    } else {
        var request = new ActiveXObject("Microsoft.XMLHTTP");
    }

  var url ="data/2.php";

    request.open("GET",url,true);
    request.send(null);

    request.onreadystatechange = function() {

        if (request.readyState == 4 && request.status == 200) {
          json =request.responseText;

            start();
        };

    }


	function start(){

 var object =JSON.parse(json);
        console.log(object);
  var num = Math.floor(Math.random()*43);
  var contentx =object[num];
  document.getElementById('title').innerHTML=contentx.title;
  document.getElementById('title_one').innerHTML=contentx.title_one;
  document.getElementById('title_two').innerHTML=contentx.title_two;
  document.getElementById('video').src=contentx.video;
  document.getElementById('video').poster=contentx.video_one;
  document.getElementById('img').src=contentx.img;
  document.getElementById('li0').innerHTML="导演:"+contentx.director;
  document.getElementById('li1').innerHTML="类型:"+contentx.type;
  document.getElementById('li2').innerHTML="演员:"+contentx.actor;
  document.getElementById('li3').innerHTML="时间:"+contentx.time_one;
        document.getElementById('li4').innerHTML="简介:"+contentx.introduction;
  var content=document.getElementById('content');
        //content.innerHTML=contentx.content;



   var word=contentx.content;
   var word1 = word.split('<br>');
   for (var i = 0; i < word1.length; i++) {
   var box =document.createElement("div");
   content.appendChild(box);
   box.innerHTML=word1[i];
   box.id="box"+i;

   }





}




   }
  </script>
</html>
